<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>接受端</title>
    <link rel="stylesheet" href="/public/css/wing.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
    <script src="https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js"></script>
</head>
<body>
    <div id="app">
        <div class="row">
            <div class="col-8">
                <input type="text" v-model="room" placeholder="输入房间号">
            </div>
            <div class="col-4 text-center">
                <button
                @click="initRoom"
                >{{collect?'断开':'连接'}}</button>
            </div>
        </div>
        <div class="row">
            <div
            class="col-12"
            v-for="(i,k) in msgList">
                {{i}}
            </div>
            <!-- <div class="col-3"><button @click="sendMsg">发礼品</button></div>
            <div class="col-3"><button>发起问卷</button></div>
            <div class="col-3"><button>发起投票</button></div>
            <div class="col-3"><button>发起考试</button></div> -->
        </div>
    </div>
</body>
<script>
var socket;
var app = new Vue({
    el:'#app',
    data:{
        room:'110',
        collect:false,
        msgList:[]
    },
    methods:{
        initRoom:function() {
            if (!this.room) {
                alert('请先输入房间号')
                return
            }else if(!this.collect&&this.room){
                socket = io('/admin',{
                    query:{
                        room:this.room
                    }
                });
                socket.on('connect', () => {
                    this.collect = true 
                    socket.on('online',e => {
                        console.log(e)
                    })
                    socket.on('redbag', e => {
                        console.log(e)
                        this.msgList.push({
                            action:'redbag',
                            data:e
                        })
                    })
                    socket.on('ques', e => {
                        console.log(e)
                        this.msgList.push({
                            action:'ques',
                            data:e
                        })

                    })
                    socket.on('vote', e => {
                        console.log(e)
                        this.msgList.push({
                            action:'vote',
                            data:e
                        })

                    })
                    socket.on('exam', e => {
                        console.log(e)
                        this.msgList.push({
                            action:'exam',
                            data:e
                        })

                    })
                    // socket.join(this.room)
                })
                socket.on('disconnect', msg => {
                    console.log(msg)
                    this.collect = false 
                    socket.disconnect(true)
                });
            } else {
                this.collect = false 
                socket.disconnect(true)
            }
        },
        sendMsg:function() {
            socket.emit('action',{
                action:'redroom',
                data:121
            })
        }
    }
})
</script>
<style>
#app {
    padding:100px;
}
</style>
</html>